<template>
  <div>
    <div style="margin-right:50px; float:right;display:flex;justify-content:space-between">
      <div class="block"  style="padding-right: 680px;padding-bottom: 10px;padding-top: 20px">
        <span class="demonstration"></span>
        <el-date-picker
            v-model="value1"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions0">
        </el-date-picker>
        <el-button-group>
          <el-button type="primary" style="background-color:#429d52" icon="el-icon-search" @click="selectDate">搜索</el-button>
          <el-button type="info" icon="el-icon-refresh"  @click="resetDate">取消</el-button>
        </el-button-group>
      </div>
      <div style="padding-top: 20px">
        <el-button-group >
          <download-excel :data="emps" :fields="json_fields" :name="tableName">
            <el-button type="success"  icon="el-icon-download" :disabled="emps.length == 0">
              打印报表
            </el-button>
          </download-excel>
        </el-button-group>
      </div>
    </div>
    <div>
      <el-table :data="emps" show-summary stripe border v-loading="loading" element-loading-text="正在加载..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%">
        <el-table-column prop="department_name" align="center" label="部门名称" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="人数统计" show-overflow-tooltip>
          <el-table-column prop="number_begin" align="center" label="月初人数" show-overflow-tooltip></el-table-column>
          <el-table-column prop="number_end" align="center" label="月末人数" show-overflow-tooltip></el-table-column>
          <el-table-column prop="move_in" align="center" label="本月调入" show-overflow-tooltip></el-table-column>
          <el-table-column prop="move_out" align="center" label="本月调出" show-overflow-tooltip></el-table-column></el-table-column>
        <el-table-column align="center" label="学历统计" show-overflow-tooltip>
          <el-table-column prop="graduate_school" align="center" label="研究生" show-overflow-tooltip></el-table-column>
          <el-table-column prop="undergraduate_school" align="center" label="本科" show-overflow-tooltip></el-table-column>
          <el-table-column prop="junior_school" align="center" label="大专" show-overflow-tooltip></el-table-column>
          <el-table-column prop="high_school" align="center" label="高中及以下" show-overflow-tooltip></el-table-column></el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size="pageSize"
            :page-sizes="11"
            :current-page.sync="currentPage"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="emps.length">
          <!--                        :total="total">-->
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "pensonreport",
  data() {
    return {
      loading : false,
      emps : [],
      time :{
        start:'',
        end:'',
      },
      temp :{
        month: null,
        department_name : '',
        number_begin :null,
        number_end:null,
        move_in:null,
        move_out:null,
        graduate_school:null,
        undergraduate_school:null,
        junior_school:null,
        high_school:null,
      },
      tableName : "人事月报表",
      currentPage : 1,
      pageSize : 10,
      json_fields: {
        //导出Excel表格的表头设置
        '部门名称': 'department_name',
        '当前月份': 'month',
        '月初人数': 'number_begin',
        '月末人数': 'number_end',
        '本月调入': 'move_in',
        '本月调出': 'move_out',
        '研究生': 'graduate_school',
        '本科': 'undergraduate_school',
        '大专': 'junior_school',
        '高中及以下': 'high_school',
      },
      value1: "",
      value:"",
      dateRules : {
        value : [{required : true, message : '请输入开始', trigger : 'blur'}],
        value1 : [{required : true, message : '请输入结束', trigger : 'blur'}],
      },
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.value !== "" || this.value1 !=="") {
            return time.getTime() > Date.now() || time.getTime() > this.value2;
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
    }
  },
  mounted() {
    this.initEmps();
  },
  computed : {
    empsData() {
      if (this.emps.length > 0) {
        return this.emps.slice( (this.currentPage -1) * this.pageSize, this.currentPage * this.pageSize) || [];
      }
      console.log("emps = ", this.emps);
      return this.emps;
    }
  },
  methods : {
    initEmps() {
      this.loading = true;
      var date1 = new Date().toLocaleDateString()
      date1=date1.toString()
      date1=date1.split("/")
      // var date2 =
      // var date3 =
      console.log(date1)
      this.time.start=date1[0]+"-"+date1[1]+"-"+"01"
      this.time.end=date1[0]+"-"+date1[1]+"-"+"31"
      this.temp.month = parseInt(date1[1])
      console.log(this.time.start+this.time.end)
      // this.$axios.post('/EmployeeBasic/PersonReport',this.time).then(resp =>{
      //   if(resp){
      //     this.emps=resp.data
      //     console.log("表计算情况：：",resp.data.msg);
      //   }
      // })
      if (localStorage.getItem("role") === "总裁") {
        this.$axios.post('/EmployeeBasic/showReport',this.temp).then(resp => {
          this.loading = false;
          if (resp) {
            this.emps = resp.data.data;
            console.log("resp = ", this.emps);
            this.total = resp.total;
          }
        })
      }

    },
    sizeChange(currentSize) {
      this.pageSize = currentSize;
      this.initEmps();
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.initEmps();
    },
    selectDate() {
      if ((this.value1 === "" || this.value1 === null) ) {
        Message.error({message : '请输入日期'});
      } else {

        this.temp.month =this.value1
        this.temp.month = this.temp.month.toString();
        this.temp.month = this.temp.month.split("-");
        this.temp.month = this.temp.month[1];
        this.temp.month  = parseInt(this.temp.month);
        console.log("value1 = ", this.temp.month);

        var url;
        this.time.start=this.value1
        this.time.end = this.value1.toString()
        var date2=  this.time.end.split("/")
        this.time.end = date2[0]+"-"+date2[1]+"-"+ "31"
        this.time.start =date2[0]+"-"+date2[1]+"-"+ "01"
        console.log(this.time.start," ",this.time.end)
        this.$axios.post('/EmployeeBasic/PersonReport',this.time).then(resp =>{
          if(resp){
            console.log("表计算情况：：",resp.data.msg);
          }
        })
        if (localStorage.getItem("role") === "总裁") {
          url = '/EmployeeBasic/showReport';
        }
        this.$axios.post(url, this.temp).then(resp => {
          if (resp.data.data) {
            this.emps = resp.data.data;
            Message.success({message : '查询成功'});
          } else {
            Message.warning({message : '未找到符合条件的信息'});
            Message.error({message : resp.data.data.msg});
          }
        })
        // this.initEmps();
      }

    },
    resetDate() {
      this.value1 = ""
      this.initEmps();
    }
  }
}
</script>

<style scoped>

</style>
